<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="css/index.css" rel="stylesheet">
		<!-- Bootstrap -->
			<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
			<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
			<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
			<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
			<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
	</head>
	<body>
		<div class="container">
			<div class="col-md-12">
				<nav class="navbar navbar-default" role="navigation">
					<div class="navbar-header">
						<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> <a class="navbar-brand" href="#">OnlyGroup</a>
					</div>
					<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
						<ul class="nav navbar-nav navbar-right">
							<li>
								<a href="index.html">首页</a>
							</li>
							<li>
								<a href="company.html">公司</a>
							</li>
							<li>
								<a href="group.html">分组</a>
							</li>
							<li>
								<a href="#">提问</a>
							</li>
							<li>
								<a href="about.html">关于</a>
							</li>
						</ul>
					</div>
				</nav>
			</div>
			<div class="row clearfix">
				<div class="col-md-offset-3 col-md-6 column">
					<form role="form" id="fm1">
						<div class="form-group">
							 <label for="scids">公司：</label>
							 <select class="form-control" name="cid" id="scids">
								 
							 </select>
						</div>
						<div class="form-group">
							 <label for="exampleInputPassword1">组人数：</label><input type="number" class="form-control" name="num" id="exampleInputPassword1" />
						</div>
						<div class="form-group">
							 <label for="lbinfo">名单：</label>
							 <textarea cols="10" rows="5" class="form-control" placeholder="名单请以逗号隔开" name="persons" id="lbinfo" ></textarea>
						</div>
						<div style="text-align: center;"><button type="button" style="width: 50%;padding: 5px;background-color: deeppink;" onclick="add()" class="btn btn-default">智能分组</button></div>
					</form>
				</div>
			</div>
			
			<div class="row clearfix" style="margin-top: 20px;">
				<div class="col-md-12 column">
					<h3>本次分组列表</h3>
				</div>
				
				<div class="col-md-12 column">
					<table class="table">
						<thead>
							<tr>
								<th>
									序号
								</th>
								<th>
									组号
								</th>
								<th>
									组长
								</th>
								<th>
									人数
								</th>
								<th>
									组员
								</th>
								<th>
									时间
								</th>
							</tr>
						</thead>
						<tbody id="tbdata">
						
						</tbody>
					</table>
				</div>
			</div>
		</div>
		<footer class="footer">
			<div class="container">
				<p style="text-align:center;padding-top:15px">Copyright © 2013-2021 OnlyGroup  condingsir.com All Rights Reserved. 备案号：闽ICP备15012807号-1</p>
			</div>
		</footer>
	</body>
	<script>
		
		//加载所有的公司信息-渲染下拉框
		loadCompany();
		function loadCompany(){
			$.get("/company/all.do",function(res){
				if(res.code==0){
					$("#scids").html("");
					for(i in res.data){
						$("#scids").append(`
						<option value="${res.data[i].id}">${res.data[i].name}</option>
						`);
					}
				}
			})
		}
		//1.实现随机分组 -Ajax
		function add(){
			console.log($("#fm1").serialize())
			//获取表单数据
			var m=$("#fm1").serialize();
			//Ajax请求 实现数据传递
			$.post("/group/create.do",m,function(res){
				if(res.code==0){
					//新增成功
					//刷新表格
					loadData(res.data);
				}else{
					alert("亲，网络异常");
				}
			})
		}
		
		//2.查询列表数据
		function loadData(arr){
			$("#tbdata").html("");
			for(i in arr){
				//es6
				$("#tbdata").append(`<tr><td>${arr[i].id}</td>
				<td>${arr[i].no}</td>
				<td>${arr[i].gleader}</td>
				<td>${arr[i].num}</td>
				<td>${arr[i].persons}</td>
				<td>${arr[i].ctime}</td>
				</tr>`);
			}
		}
	</script>
</html>
